<template>
  <div class="login">
    <div class="login-form">
      <el-form ref="form" :rules="rules" :model="loginForm" label-width="74px">
        <el-form-item label prop="username">
          <div class="form-item">
            <div class="icon-username"></div>
            <el-input placeholder="请输入账号" v-model="loginForm.username"></el-input>
          </div>
        </el-form-item>
        <el-form-item label prop="password">
          <div class="form-item">
            <div class="icon-password"></div>
            <el-input placeholder="请输入密码" v-model="loginForm.password"></el-input>
          </div>
        </el-form-item>
        <el-form-item label prop="code">
          <div style="display: flex">
            <div class="form-item" style="width: 195px;margin-right: 10px">
              <el-input style="width: 100%" placeholder="请输入验证码" v-model="loginForm.code"></el-input>
            </div>
            <validate-code ref="ref_validateCode" @change="changeCode" />
          </div>
        </el-form-item>

        <el-form-item label>
          <div class="login-button" @click="login">登录</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ValidateCode from "@/components/validate-code";
export default {
  components: { ValidateCode },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      checkCode: "",
      rules: {
        username: [{ required: true, message: "账号不能为空" }],
        password: [{ required: true, message: "密码不能为空" }],
        code: [{ required: true, validator: this.validatorCode }],
      },
    };
  },
  methods: {
    changeCode(value) {
      this.checkCode = value;
    },
    login() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          if (
            this.loginForm.code.toLowerCase() !== this.checkCode.toLowerCase()
          ) {
            this.$refs["ref_validateCode"].draw();
          }
        }
      });
    },
    validatorCode(rule, value, callback) {
      if (!value) {
        callback(new Error("验证码不能为空"));
      } else if (value.toLowerCase() !== this.checkCode.toLowerCase()) {
        callback(new Error("验证码不正确"));
      } else {
        callback();
      }
    },
  },
};
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/img/login.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: auto;
  .login-form {
    position: absolute;
    top: 26.75%;
    right: 27.2%;
    padding-top: 120px;
    width: 520px;
    height: 438px;
    background-image: url("~@/assets/img/login-form.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .icon-username {
      flex-shrink: 0;
      width: 54px;
      height: 40px;
      background-image: url("~@/assets/img/密码.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .icon-password {
      flex-shrink: 0;
      width: 54px;
      height: 40px;
      background-image: url("~@/assets/img/账号.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .el-form-item {
      margin-bottom: 37px;
    }
    .form-item {
      display: flex;
      width: 347px;
      height: 40px;
      background: rgba(0, 47, 43, 0.8);
      border: 1px solid #03af9d;
      border-radius: 2px;
      overflow: hidden;

      .el-input__inner {
        color: #03af9d;
        width: 294px;
        height: 40px;
        line-height: 40px;
        background-color: transparent;
        border: none;
      }
      input::-webkit-input-placeholder {
        color: #03af9d;
      }
    }
    .login-button {
      width: 347px;
      height: 46px;
      background: linear-gradient(90deg, #0fa284, #04b7a8, #00a56d);
      border: 0px solid #00c985;
      text-align: center;
      line-height: 46px;
      font-size: 22px;
      font-family: FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
    }
  }
  @media screen and (max-width: 1080px) {
    .login-form {
      left: 50%;
      top: 50%;
      right: initial;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
